<template>
	<view class="main">
		<view class="fuwu">
			<view class="fw-item" v-for="(item,index) in menuListt" :key="index" @click="goNavigateTo(item.pages)">
				<text class="t-icon text-icon" :class="item.icon"></text>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
		<view class="describe">{{ describe }}</view>
		<view class="week-meal-list" v-if="menuImg.length > 0">
			<view class="week-meal-list-title">本周菜谱</view>
			<view class="banner-block">
				<swiper class="swiper" autoplay="true">
					<swiper-item v-for="(item, index) in menuImg" :key="index" class="banner-item">
						<image :src="item" lazy-load="true" mode="" @click="preImg(index)"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFoodDietConfig, // 获取报餐信息
	} from "@/proxy/food/food.api.js";
	
	export default {
		data() {
			return {
				menuListt:[
					{
						icon: "t-icon-a-20230816meishitubiao_zhongcan-dongporou",
						title: "个人报餐",
						pages: "/pagesMeal/baocan/batch"
					},
					{
						icon: "t-icon-shixinchaxun",
						title: "个人记录",
						pages: "/pagesMeal/baocan/log"
					},
				],	
				menuImg: [], // 菜单图片
				describe:"", // 订餐说明
			};
		},
		async mounted() {
			await this.getFoodDietConfigData();
		},
		methods: {
			// 跳转函数
			goNavigateTo(pages) {
				uni.navigateTo({
					url: pages,
				});
			},
			async getFoodDietConfigData(){
				try {
					// 执行的异步操作
					const result = await getFoodDietConfig();
				
					console.log("报餐说明结果", result);
					if (result.code == 200) {
						for(var i = 0; i < result.data.length; i++){
							if(result.data[i].configKey == "describe"){
								this.describe = result.data[i].configValue;
							}
							if(result.data[i].configKey == "picture"){
								// 设置你需要加上的域名
								// const domain = 'http://10.1.1.19:1988';
								// const domain = 'https://limsapi.gzhbcss.com';
								// this.menuImg.push(domain+result.data[i].configValue);
								this.menuImg.push(result.data[i].configValue);
							}
						}
					} else {
						this.$toast({
							title: result.data.msg,
						});
					}
				
				} catch (err) {
					// 捕获用户取消或者提交失败的错误
					this.$toast({
						icon: 'none',
						title: '发起失败，请联系管理员！',
						duration: 2000
					});
					console.log(err);
				}
			},
			// 图片预览函数
			preImg(index) {
				if (this.menuImg.length < 1) {
					uni.showToast({
						icon: "none",
						title: "暂无菜单图片",
					});
					return;
				}
				uni.previewImage({
					urls: this.menuImg,
					current: index,
				});
			},
		},
	};
</script>

<style lang="scss">
	page{
		height: 100%;
		background: #f4f4f4;
	}
	.main {
		// background: #f1f1f1;
	}
	.back-btn {
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: #007aff;
	}

	.back-btn .iconfont {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	
	.describe{
		margin: 20rpx;
		font-size: 29rpx;
		color: #ff0000;
	}

	.week-meal-list {
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		// box-shadow: #bbb 0 0 8rpx;
	}

	.week-meal-list-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	/*幻灯片*/
	.banner-block {
		width: 100%;
		background-color: #fff;
	}

	.swiper {
		height: 600rpx;
		margin: 0 auto;
		// border-radius: 20rpx;
		overflow: hidden;
	}

	.banner-item {
		// border-radius: 20rpx;
		overflow: hidden;
	}

	.banner-item image {
		height: 100%;
		width: 100%;
		// border-radius: 20rpx;
		overflow: hidden;
	}

	.fuwu{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 3 列 */
		grid-template-rows: repeat(1, 1fr);
		/* 4 行 */
		gap: 10rpx;
		/* 单元格之间的间隙 */
		padding: 15rpx 0;
		.fw-item{
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 10rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 45rpx 0;
			.text-icon{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>